import React, { Component } from 'react';
import {
	StyleSheet, Image, TouchableOpacity,
	Text, View, Dimensions, PixelRatio, FlatList, ScrollView
} from "react-native";
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import QuoteService from './_common/service.js';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import MethodUtil from '../../../utils/MethodUtil';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;


export class HistoryListPage extends Component {

	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '报价历史',
			headerTintColor: style.color.white,//
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color="#fff" />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: style.head.headerTitleStyle
		}
	};


	constructor(props) {
		super(props);
		this.branchId = props.navigation.state.params.branchId;
		this.goodsId = props.navigation.state.params.goodsId;
		this.state = {
			modalRemark: false, // 备注弹框展示
			listData: [],
			isLoadIco: false,  // 下拉涮新的 图标
			status: 'loading'
		}
		this.pageNo = 1;//当前第几页
		this.totalPage = 0; //总页数
	}


	async	componentWillMount () {
		this._getData();
	}

	componentDidMount () {

	}

	async	componentWillUnmount () {

	}

	//获取列表数据
	_getData = async (refreshOff) => {
		let params = {
			branchId: this.branchId,
			goodsId: this.goodsId,
			pageNo: this.pageNo
		}
		this.setState({
			status: 'loading',
			isLoadIco: true,
		})
		let responseData = await QuoteService.quoteHistoryList(params);

		if (responseData && responseData.rows && responseData.rows.length) {
			this.totalPage = responseData.totalPage;
			if (refreshOff) { //刷新
				this.setState({
					status: 'data',
					isLoadIco: false,
					listData: responseData.rows,
				});
			} else { // 加载
				this.setState({
					status: 'data',
					isLoadIco: false,
					listData: this.state.listData.concat(responseData.rows),
				});
			}
		} else { //没数据
			this.setState({
				isLoadIco: false,
				status: 'empty',
				listData: []
			});
		}
	}


	// 备注showdemo
	_retuenMarkModel = () => {
		let { markBody } = this.state;
		return (
			<View style={styles.markBox}>
				<Text style={styles.markTitle}>备注</Text>
				<ScrollView>
					<Text style={styles.markBody}>{markBody}</Text>
				</ScrollView>
			</View>
		)
	}

	//备注点击显示
	_showMark = (markBody) => {
		this.setState({
			modalRemark: true,
			markBody
		})
	}

	//关闭备注
	_closeMarkModel = () => {
		this.setState({
			modalRemark: false
		})
	}


	//最大值 昨天:100 上次:0 提报-100
	_maxFn = (suggestedPrice, lastPrice, yesdayPrice) => {
		let range1 = MethodUtil.countObj.subtract(suggestedPrice || 0, lastPrice || 0);
		let range2 = MethodUtil.countObj.subtract(suggestedPrice || 0, yesdayPrice || 0);

		//相同值 取 跌
		if ((Math.abs(range1) == Math.abs(range2)) && (range1 != range2)) {
			return range1 > range2 ? range2 : range1;
		}
		return Math.abs(range1) > Math.abs(range2) ? range1 : range2;
	}


	_compare = (num1, num2) => {
		return MethodUtil.countObj.subtract(num1 || 0, num2 || 0);
	}


	// 数据模板
	_renderItemView = (customer) => {
		let { goodsName, staffName, createTime, statusName, suggestedPrice, lastPrice, remark, yesdayPrice
		} = customer.item || {};
		let range1 = this._compare(suggestedPrice, lastPrice);
		let range2 = this._compare(suggestedPrice, yesdayPrice);
		let downImg = require('../../../imgs/my-siter/down.png');
		let upImg = require('../../../imgs/my-siter/up.png');
		return (
			<View style={styles.listItem}>
				<View style={styles.listItemHead}>
					<TouchableOpacity style={styles.itemLeft}>
						<Text style={styles.itemTitle} >{goodsName}</Text>
					</TouchableOpacity>
					<Text style={styles.itemRight}>{statusName}</Text>
				</View>

				<View style={styles.itemBody}>
					<View style={{ flexDirection: 'row' }}>
						<View style={styles.itemMore}>
							<Text style={styles.itemFont}>昨日现货价(元)：</Text>
							<Text style={[styles.itemFont, styles.itemColor]}>{yesdayPrice || '-'}</Text>
						</View>
						<View style={styles.itemMore}>
							<Text style={[styles.itemFont, styles.block]}>本次较昨日涨跌</Text>
							<View style={styles.itemMore}>
								<Image source={range2 >= 0 ? upImg : downImg} style={{ marginRight: 3 * scale, height: 14 * scale, marginLeft: 10 * scale }} />
								<Text style={[styles.itemFont, styles.itemColor, range2 >= 0 ? styles.itemColorUp : styles.itemColorDown]}>{range2}</Text>
							</View>
						</View>
					</View>


					<View style={{ flexDirection: 'row' }}>
						<View style={styles.itemMore}>
							<Text style={styles.itemFont}>上次现货价(元): </Text>
							<Text style={[styles.itemFont, styles.itemColor]}>{lastPrice || '-'}</Text>
						</View>
						<View style={styles.itemMore}>
							<Text style={[styles.itemFont, styles.block]}>本次较上次涨跌</Text>
							<View style={styles.itemMore}>
								<Image source={range1 >= 0 ? upImg : downImg} style={{ marginRight: 3 * scale, height: 14 * scale, marginLeft: 10 * scale }} />
								<Text style={[styles.itemFont, styles.itemColor, range1 >= 0 ? styles.itemColorUp : styles.itemColorDown]}>{range1}</Text>
							</View>
						</View>
					</View>

					<View style={styles.itemMore}>
						<Text style={styles.itemFont}>本次提报价(元)：</Text>
						<Text style={[styles.itemFont, styles.itemColorTheme]}>{suggestedPrice}</Text>
					</View>
					<View style={styles.itemMore}>
						<Text style={styles.itemFont}>提报时间：</Text>
						<Text style={[styles.itemFont, styles.itemColor]}>{createTime}</Text>
					</View>

				</View>

				<View style={styles.itemBottom}>
					<View style={styles.itemMore}>
						<Text style={styles.itemFont}>提报人：</Text>
						<TouchableOpacity style={styles.itemMore} onPress={() => { remark && this._showMark(remark) }}>
							<Text style={[styles.itemFont, styles.itemColor]}>{staffName}</Text>
							{remark ? <Text style={styles.remark}>备</Text> : null}
						</TouchableOpacity>
					</View>
				</View>

			</View>
		)
	}

	// 下拉更新函数
	_isLoadRefresh = async () => {
		this.pageNo = 1;
		await this._getData(true);
	}

	// 上拉更新函数
	_onEndReached = async () => {
		if (this.pageNo < this.totalPage) {
			this.pageNo++;
			this._getData();
		}
	}

	render () {
		let { modalRemark, status, isLoadIco, listData } = this.state || {}
		return (
			<View style={styles.container}>
				<View style={styles.com}>
					<View style={styles.list}>
						<FlatList
							data={listData}
							extraData={this.state}
							renderItem={this._renderItemView}
							refreshing={isLoadIco}
							onRefresh={this._isLoadRefresh}
							onEndReachedThreshold={0.5}
							onEndReached={this._onEndReached}
						/>
					</View>
				</View>
				{modalRemark ? (<Common type="modal" demoData={this._retuenMarkModel()} modelClick={this._closeMarkModel} closeCallballFn={this._closeMarkModel} />) : null}
				{
					status == 'loading' || status == 'empty' ? (<View style={{ position: 'absolute', height: '100%', width: '100%', top: 0 }}>
						<PageStatusIndex status={status} />
					</View>
					) : null
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.gray
	},
	com: {
		flex: 1,
	},
	itemTitle: {
		fontSize: 14 * scale,
		color: style.color.inputLabelValue
	},
	screen: {
		height: 48 * scale,
		borderTopLeftRadius: 5 * scale,
		borderTopRightRadius: 5 * scale,
		backgroundColor: style.color.white,
		flexDirection: 'row',
		justifyContent: 'space-around'
	},
	screenItem: {
		height: 48 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		flexDirection: 'row',
		alignItems: 'center'
	},
	screenFont: {
		fontSize: 13 * scale,
		marginRight: 3 * scale
	},
	listItem: {
		backgroundColor: style.color.white,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		marginTop: 12 * scale
	},
	listItemHead: {
		height: 44 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	itemLeft: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	itemRight: {
		fontSize: 14 * scale,
		color: '#404040'
	},
	itemBody: {
		borderBottomColor: style.color.white,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	itemFont: {
		fontSize: 12 * scale,
		color: style.color.darkGray
	},
	itemColor: {
		color: style.color.dark
	},
	itemColorTheme: {
		color: style.color.themeColor
	},
	itemColorUp: {
		color: '#FC5454',
		//marginLeft: 10 * scale,
		marginRight: 3 * scale
	},
	itemColorDown: {
		color: style.color.button,
		//	marginLeft: 10 * scale,
		marginRight: 3 * scale
	},
	itemMore: {
		flexDirection: 'row',
		alignItems: 'center',
		width: '50%',
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
	},
	itemBottom: {
		borderTopWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderTopColor: style.color.gray,
		height: 49 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	remark: {
		width: 16 * scale,
		height: 16 * scale,
		fontSize: 10 * scale,
		color: style.color.white,
		backgroundColor: '#F6AC35',
		lineHeight: 15 * scale,
		textAlign: 'center',
		borderRadius: 8 * scale,
		marginLeft: 4 * scale
	},
	modelOut: { top: 88 * scale },
	modelBox: {
		borderTopWidth: 2 * scale,
		borderStyle: 'solid',
		borderTopColor: style.color.gray,
	},
	markBox: {
		width: 300 * scale,
		height: 260 * scale,
		backgroundColor: style.color.white,
		borderRadius: 13 * scale,
	},
	markTitle: {
		fontSize: 18 * scale,
		textAlign: 'center',
		color: style.color.dark,
		marginTop: 15 * scale
	},
	markBody: {
		fontSize: 12 * scale,
		lineHeight: 26 * scale,
		padding: 20 * scale
	},
	list: {
		flex: 1,
	},
	block: {
		color: '#000'
	}
})